<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 500px;
            height: 400px;
            margin: 100px auto;
            box-shadow: 0px 0px 2px 1px rgb(0 0 0 / 20%);
            text-align: center;
            background-color: gray;
        }

        .header {
            height: 50px;
            border-bottom: 1px rgb(190, 190, 190) solid;
        }

        input {
            width: 70%;
            height: 40px;
            border-radius: 5px;
            outline: none;
            border: none;
            text-indent: 1em;
        }

        p {
            font-size: 5px;
            color: red;
        }

        .lis {
            margin-top: 40px;

        }

        button {
            width: 30%;
            height: 30px;
            border-radius: 5px;
            outline: none;
        }
    </style>
    <script src="./jquery3.5.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="header">
            登录
        </div>
        <div class="lis">
            <div>
                用户名：<input type="text" class="ipt1" placeholder="请输入用户名" />
                <p class="p1"></p>
            </div>
            <div>
                密码：<input type="password" class="ipt2" placeholder="请输入密码" />
                <p class="p2"></p>
            </div>
        </div>
        <button disabled>登录</button>
    </div>
    <script>
        // let ipt1 = document.querySelector('.ipt1');
        // let ipt2 = document.querySelector('.ipt2');
        // let p1 = document.querySelector('.p1');
        // let p2 = document.querySelector('.p2');
        // let btn = document.querySelector('button')
        // let flag1 = false;
        // let flag2 = false;
        // // $('.ipt1').focus() 自动聚焦在该位置
        // ipt1.onblur = function () {
        //     re = /^[\w_-]{4,16}$/
        //     if (!re.test(ipt1.value)) {
        //         p1.innerHTML = '用户名输入错误，4到16位，字母，数字，下划线，减号';
        //         flag1 = false;
        //     } else {
        //         p1.innerHTML = '';
        //         flag1 = true;
        //     }
        //     checkBtn()
        // }
        // ipt2.onblur = function () {
        //     re = /^[\w_-]{8,15}$/
        //     if (!re.test(ipt2.value)) {
        //         p2.innerHTML = '密码输入错误，8到15位，字母，数字，下划线，减号';
        //         flag2 = false;
        //     } else {
        //         p2.innerHTML = '';
        //         flag2 = true;
        //     }
        //    checkBtn()
        // }
        // function checkBtn(){
        //     if (flag1 == true && flag2 == true) {
        //         btn.disabled = false;
        //         // $("button").attr('disabled',false)
        //     } else {
        //         btn.disabled = true;
        //     }
        // }
        let flag1 = false;
        let flag2 = false;
        $('.ipt1').bind('blur', function () {
            let ipt = $('.ipt1').val();
            console.log('==》', ipt);
            re = /^[\w_-]{4,15}$/
            if (!re.test(ipt)) {
                $('.p1').text('用户名输入错误，4到16位，字母，数字，下划线，减号');
                flag1 = false;
            } else {
                $('.p1').empty();
                flag1 = true
            }
            return flag1
        })
        console.log(flag1);
        $('.ipt2').bind('blur', function () {
            let ipt2 = $('.ipt2').val();
            re = /^[\w_-]{8,15}$/
            if (!re.test(ipt2)) {
                $('.p2').text('密码输入错误，4到16位，字母，数字，下划线，减号');
                flag2 = false;
            } else {
                $('.p2').empty()
                flag2 = true
            }
            if (flag1 == true && flag2 == true) {
                $("button").attr('disabled', false)
            } else {
                $("button").attr('disabled', '')
            }
        })
        $('.ipt1').focus()
    </script>
</body>

</html>